<!DOCTYPE html>
<html>
    <head>
	    <meta charset="utf-8">
        <title>iOS and js 交互</title>
        <style type="text/css">
            * {
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <div style="margin-top:100px">
            <h1 style="color:red;">测试如何使用H5与OC进行交互</h1><br/>
            <button onclick="calljsmsg(1641);">点击我然后看xcode的log</button><br/>
            <div>Click me here:<a href="http://52doushi.com">jump to 欧兰</a></div>
        </div>
        </br>
        
        <div>
            <div><input type="button" value="点击触发JSAlert方法" onclick="callJsAlert();"></div><br/>
            <div><input type="button" value="点击触发JSConfirm方法" onclick="callJsConfirm();"></div><br/>
            <div><input type="button" value="点击触发JSInput方法" onclick="callJsInput();"></div><br/>
        </div>

        <div id="SwiftDiv">
            <span id="jsParamFuncSpan" style="color:red; font-size:50px;"></span>
        </div>

        <script type="text/javascript">
            function calljsmsg(vid) {
                window.webkit.messageHandlers.ZhangliangTest.postMessage({command:'showVideo',vid:1641});
            }
        
            function callJsAlert() {
                alert('这个是OC调用JS的方法，并且通过Alert进行显示');
                window.webkit.messageHandlers.js_alert.postMessage({body:'在JS中调用OC'});
            }
        
            function callJsConfirm() {
                if(confirm('confirm', 'Objective-C call js to show confirm')) {
                    document.getElementById('jsParamFuncSpan').innerHTML = 'true';
                } else {
                    document.getElementById('jsParamFuncSpan').innerHTML = 'false';
                }
                window.webkit.messageHandlers.js_alert.postMessage({body:'这是js的内容'});
            }
        
            function callJsInput() {
                var response = prompt('Hello','请输入您的姓名：');
                document.getElementById('jsparamFuncSpan').innerHTML = response;
                window.webkit.messageHandlers.js_alert.postMessage({body:response});
            }
        </script>
    </body>
</html>
